<template>
    <div class="main">
        <div class="img">
            <img src="@/../public/img/每时每刻.png" alt="">
        </div>
        <div class="box">
            <div class="bx">
                <div>
                    <input type="text" placeholder="请输入手机号" v-model="tel">
                </div>
                <div>
                    <span @click="verification" v-if="falg">获取验证码</span>
                    <span style="color:#ccc" v-else>获取验证码({{num}})</span>
                </div>
            </div>
            <div class="bx">
                <div>
                    <input type="password" v-model="password" placeholder="请输入短信验证码">
                </div>
                <div>

                </div>
            </div>
            <div class="bx" style="color:#ccc;border:none;font-size: 0.2rem;">
                <div>
                    *未注册的手机号将自动注册*
                </div>
                <div style="color:#ccc;font-size: 0.2rem;">
                    使用密码登录
                </div>
            </div>
            <van-button color="#ff8c41" style="width:100%;height: 1rem;border-radius: 0.5rem;" @click="login">登录
            </van-button>
        </div>
    </div>
</template>

<script>
import { semsCode, login } from '@/http/api'
import { Button, Toast, Notify } from "vant";

export default {
    components: {

        [Button.name]: Button,
        [Toast.name]: Toast,
    },
    data() {
        return {
            //手机号
            tel: '',
            //密码
            password: '',
            falg: true,
            num: 4,
            trem: null,
            //登陆的参数
            obj: {
                mobile: '',
                sms_code: '',
                type: 2,
                client: 1
            }
        }
    },
    methods: {
        verification() {
            semsCode(this.tel, 'login').then(res => {
                Toast(res.data.msg);
            })

            this.falg = false
            this.trme = setInterval(() => {
                this.num > 0 ? this.num-- : clearInterval(this.trme)
                if (this.num == 0) {
                    this.falg = true
                    this.num = 10
                }
            }, 1000)
        },
        async login() {
            this.obj.mobile = this.tel
            this.obj.sms_code = this.password
            let res = await login(this.obj)
            console.log(res);
            if (res.data.code == 200) {
                // 成功通知
                Notify({ type: 'success', message: '登陆成功' });
                localStorage.setItem('msmkcode', JSON.stringify(res.data.data))
                this.$router.push('/my')
            } else {
                // 警告通知
                Notify({ type: 'warning', message: '登陆失败' });
            };
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;

    .img {
        width: 100%;
        height: 30vh;
        box-sizing: border-box;

        >img {
            width: 60%;
            height: 60%;
            margin: auto;
            display: block;
            margin-top: 2rem;
        }
    }
}

.box {
    width: 90%;
    margin: auto;


    .bx {
        height: 1rem;
        line-height: 1rem;
        margin: 0.4rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        font-size: 0.40rem;

        >div:nth-child(1) {
            width: 70%;

            >input {
                width: 100%;
                height: 100%;
                border: none;
            }
        }

        >div:nth-child(2) {
            width: 30%;
            text-align: center;
            color: #ed8547;
        }
    }
}
</style>